import {
  ProForm,
  ProFormDigit,
  ProFormGroup,
  ProFormSelect,
  ProFormText,
} from "@ant-design/pro-components";
import { message } from "antd";

import React from "react";

const Page10: React.FC = () => {
  const handleSubmit = async (values: any) => {
    console.log("表单数据:", values);
    message.success("提交成功！");
  };

  return (
    <div style={{ padding: 24 }}>
      <h1>分组表单</h1>
      <ProForm
        onFinish={handleSubmit}
        layout="vertical"
        style={{ maxWidth: 800 }}
      >
        <ProFormGroup title="基本信息">
          <ProFormText
            name="name"
            label="姓名"
            placeholder="请输入姓名"
            rules={[{ required: true, message: "请输入姓名" }]}
          />
          <ProFormText
            name="email"
            label="邮箱"
            placeholder="请输入邮箱"
            rules={[
              { required: true, message: "请输入邮箱" },
              { type: "email", message: "请输入有效的邮箱地址" },
            ]}
          />
          <ProFormText name="phone" label="电话" placeholder="请输入电话" />
        </ProFormGroup>

        <ProFormGroup title="工作信息">
          <ProFormSelect
            name="department"
            label="部门"
            options={[
              { label: "技术部", value: "tech" },
              { label: "产品部", value: "product" },
              { label: "运营部", value: "operation" },
            ]}
            placeholder="请选择部门"
          />
          <ProFormText name="position" label="职位" placeholder="请输入职位" />
          <ProFormDigit
            name="salary"
            label="薪资"
            placeholder="请输入薪资"
            min={0}
            fieldProps={{
              suffix: "元",
            }}
          />
        </ProFormGroup>

        <ProFormGroup title="其他信息">
          <ProFormText name="address" label="地址" placeholder="请输入地址" />
          <ProFormText
            name="emergencyContact"
            label="紧急联系人"
            placeholder="请输入紧急联系人"
          />
        </ProFormGroup>
      </ProForm>
    </div>
  );
};

export default Page10;
